<template>
  <div id="chatBox">
    <UserFriends />
    <!-- 绑定随机key值,让复用组件每次都会重新加载 -->
    <!-- <transition
      name="animate__animated "
      enter-active-class="animate__bounceInDown"
    > -->
    <router-view :key="key"></router-view>
    <!-- </transition> -->
  </div>
</template>

<script>
  import UserFriends from '@/components/home/UserFriends'

  export default {
    name: 'ChatBox',
    components: { UserFriends, },
    computed: {
      key() { //生成随机的key值
        return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
      }
    }
  }
</script>

<style scoped>
  #chatBox {
    display: flex;
  }
</style>